<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>欢迎展示页</title>
    <script src="/static/js/websocket/jquery-3.2.1.min.js"></script>
    <script src="/static/js/websocket/sockjs.min.js"></script>
    <script src="/static/js/websocket/stomp.min.js"></script>
    <script src="/static/js/websocket/common.js"></script>
    
    <style type="text/css">
    	@charset "UTF-8";
		*{margin:0;padding:0;border: 0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-family: 'PINGFANG';}
		@font-face { 
			font-family: 'PINGFANG'; 
			src: local('PINGFANG Regular'), 
			local('PINGFANG'), 
			url('/static/fonts/PINGFANG.TTF') format('truetype');
		} 
		.wrap{width: 100%;height: 100%;background: url("/static/img/welcomePage/img_back.png") no-repeat;background-size: cover;}
		.top{height: 13%;width: 100%;background: #FA6031;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;}
		.top .logo,.top .date{width: 360px;text-align: center;}
		.inform{height: 70%; background: #F9522A;border-radius: 4px;margin: 0 auto;flex: 1;-webkit-flex:1;}
		.top .date p{color: #fff;font-size: 36px;font-weight: bold;}
		.top .date p:last-child{font-size: 24px;font-weight: normal;}
		.inform{padding: 0 40px;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;}
		.inform span{color: #fff;font-size:36px;margin-left: 20px;font-weight:bold; overflow: hidden; white-space: nowrap;}
		.main{display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;}
		.main img{width: 70%;margin: 0 auto;display: block;}
    </style>
    
    
    <script type="text/javascript">
		$(function(){
			//展示右上角时间
			showTime();
			
			//获取url上的用户名
			var company = getQueryString("company");
	
		    var path = 'localhost:8080';  
	
		    var userId = company;  
		    if(userId == undefined){
		    	alert("公司为空，URL上必须要带上company=xxx,启动xxx为公司登录后台系统的后缀！")
		        return;
		    }  
		    var jspCode = userId+"_AAA";  
		    var websocket;  
		    if ('WebSocket' in window) {  
		        websocket = new WebSocket("ws://" + path + "/wsMy?jspCode=" + jspCode);  
		    } else if ('MozWebSocket' in window) {  
		        websocket = new MozWebSocket("ws://" + path + "/wsMy?jspCode=" + jspCode);  
		    } else {  
		        websocket = new SockJS("http://" + path + "/wsMy/sockjs?jspCode=" + jspCode);  
		    }  
		    websocket.onopen = function(event) {  
		        console.log("WebSocket:已连接");  
		        console.log(event);  
		    };  
		    websocket.onmessage = function(event) {  
		        var data = JSON.parse(event.data);  
		        console.log("WebSocket:收到一条消息-norm", data);
		        if(data != null && data != undefined){
		        	
		        	if(data.companyLogo != null && data.companyLogo != ""){
			        	$("#companyLogo").attr("src",data.companyLogo);
		        	}
		        	
		        	if(data.welcomeWord != null && data.welcomeWord != ""){
		        		$("#welcomeWord").text(data.welcomeWord);
		        	}
		        	
		        	if(data.seatImage != null && data.seatImage != ""){
			        	$("#seatImage").attr("src",data.seatImage);
		        	}
		        	
		        	if(data.welcomeVoice != null && data.welcomeVoice != ""){
		        		
		        		debugger;
		        		$("#welcomeVideo").attr("src",data.welcomeVoice);
		        		
		        		//声音延迟两秒播放
		        		var audio = document.getElementById("welcomeVideo");
		        		setTimeout(function(){
				        	//开始播放时切换播放图标为动态喇叭
//	 			        	$("voiceImg").attr("src","");
				        	audio.play();
						},2000);
		        		
			        	audio.addEventListener('ended', function () {
			        		//播放结束修改喇叭为静态图标
// 			        		$("voiceImg").attr("src","");
// 			        		alert("播放结束")
			        	}, false);
		        	}
		        	
		        }
		        
		    };  
		    websocket.onerror = function(event) {  
		        console.log("WebSocket:发生错误 ");  
		        console.log(event);  
		    };  
		    websocket.onclose = function(event) {  
		        console.log("WebSocket:已关闭");  
		        console.log(event);  
		    }  
		})
		
		function showTime(){
			$(".wrap").css({'width':$(window).width(),'height':$(window).height()});
	
	  		var h = $(window).height() - $(".top").height()
					$(".main").css('height',h);
	  		$(window).resize(function(event) {
			    $(".wrap").css({'width':$(window).width(),'height':$(window).height()});
				$(".main").css('height',h);
		  	});
	  		setInterval("GetTime()", 1000);
		}
		
	  	function GetTime() {
	         var mon, day, now, hour, min, ampm, time, str, tz, end, beg, sec;
	         mon = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
	                 "九月", "十月", "十一月", "十二月");
	         
	         day = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
	         now = new Date();
	         hour = now.getHours();
	         min = now.getMinutes();
	         sec = now.getSeconds();
	         if (hour < 10) {
	             hour = "0" + hour;
	         }
	         if (min < 10) {
	             min = "0" + min;
	         }
	         if (sec < 10) {
	             sec = "0" + sec;
	         }
	         $(".time").html(hour + ":" + min + ":" + sec);
	         $(".datetime").html(now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate() + " "+day[now.getDay()])
	     }
		
	</script>
</head>
<body>
	<div class="wrap">
    <div class="top">
    	<div class="logo"><img id="companyLogo" src="/static/img/welcomePage/logo.png" alt=""></div>
    	<div class="inform">
    		<img id="voiceImg" src="/static/img/welcomePage/icon_infrom.png" alt="">
    		<video id="welcomeVideo" src="http://720ljq2test-10037467.file.myqcloud.com/VOICE1516270472.mp3"  style="opacity:0" preload="auto" controls hidden="true"></video>
    		<span id="welcomeWord">欢迎金正恩，祝您今日工作愉快。</span>
    	</div>
		<div class="date">
			<p class="time"></p>
			<p class="datetime">2018/1/19 星期五</p>
		</div>
    </div>
    <div class="main">
      <img id="seatImage" src="/static/img/welcomePage/img_back2.png" alt="">
    </div>
  </div>

</body>
</html>